<template>
  <div
    class="search-list"
    v-show="isShowSearchList"
    ref="searchList"
    :style="{ 'max-height': tableHeight + 40 + 'px' }"
  >
    <el-table
      :data="tableData"
      :height="tableHeight"
      border
      style="width: 100%"
      :row-class-name="tableRowClassName"
      @row-click="handleRowClick"
    >
      <!-- 动态列（中间内容列）-->
      <el-table-column
        v-for="column in columns"
        :key="column.prop"
        :fixed="column.fixed"
        :prop="column.prop"
        :label="column.label"
        :align="column.align"
        :width="column.width"
      >
        <!-- 插槽处理 户主姓名 -->
        <template v-if="column.prop === 'hzxm'" #default="{ row }">
          {{ getHzxm(row.hzxm) }}
        </template>
        <!-- 插槽处理 村 -->
        <template v-if="column.prop === 'village'" #default="{ row }">
          {{ getVillage(row.village) }}
        </template>
        <!-- 插槽处理 详细地址 -->
        <template v-if="column.prop === 'address'" #default="{ row }">
          {{ getAddress(row.address) }}
        </template>
      </el-table-column>

      <!-- 固定操作列 -->
      <el-table-column fixed="right" label="操作" width="80" align="center">
        <template #default="scope">
          <el-button
            v-if="scope.row.feature !== null"
            type="primary"
            size="small"
            @click.prevent="location(scope)"
            >定位</el-button
          >
          <el-button
            v-if="scope.row.feature === null"
            type="primary"
            size="small"
            @click.prevent="openFn(scope)"
            >打开</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination" v-show="total > 0">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-size="currentSize"
        :pager-count="5"
        :page-sizes="[10, 20, 50, 100]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        popper-class="select_bottom"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, watch, onMounted, nextTick } from 'vue'
import { getCenterPoint } from '@/utils/commonFn/index.js'
import { ElMessage } from 'element-plus'
// emit
const emit = defineEmits()
// Props
const props = defineProps({
  isShowSearchList: {
    type: Boolean,
    default: false,
  },
  tbList: {
    type: Object,
    default: () => ({}),
  },
  tableData: {
    type: Array,
    default: () => [],
  },
  total: {
    type: Number,
    default: false,
  },
})

// Reactive state
const columns = ref([
  { prop: 'index', label: '序号', align: 'center', width: '50', fixed: 'left' },
  { prop: 'xzq', label: '行政区', align: 'left', width: '80' },
  { prop: 'town', label: '乡镇', align: 'left', width: '80' },
  { prop: 'village', label: '村', align: 'left', width: '120' },
  { prop: 'hzxm', label: '姓名', align: 'left', width: '80' },
  { prop: 'address', label: '详细地址', align: 'left', width: '100' },
  { prop: 'fwbh', label: '房屋编号', align: 'left', width: '140' },
])
const tableData = ref([])
const currentPage = ref(1)
const currentSize = ref(100)
const total = ref(0)
const tableHeight = ref(360) // 默认值为360px
const searchList = ref(null)

watch(
  () => props.tableData,
  (newData) => {
    if (newData) {
      tableData.value = newData
      nextTick(() => {
        let h = tableData.value.length
        let allHeight = document.querySelector('.map-container').clientHeight
        // 小于表格 高度
        if (h * 30 < allHeight) {
          if (h === 0) {
            tableHeight.value = allHeight * 0.65
          } else {
            tableHeight.value = h * 30 + 50
          }
        } else {
          // 大于表格高度
          let allHeight = document.querySelector('.map-container').clientHeight
          tableHeight.value = allHeight * 0.65
        }
      })
    }
  },
  { immediate: true } // 在组件初始化时就进行一次赋值
)
watch(
  () => props.total,
  (newData) => {
    total.value = newData
  },
  { immediate: true } // 在组件初始化时就进行一次赋值
)

// 动态获取 列表高度
watch(
  () => props.isShowSearchList,
  (newVal) => {
    if (newVal) {
      // nextTick(() => {
      //   if (searchList.value) {
      //     let allHeight = document.querySelector('.map-container').clientHeight
      //     tableHeight.value = allHeight * 0.65
      //   }
      // })
    }
  }
)

onMounted(() => {
  if (props.isShowSearchList) {
    // DOM 渲染完成后获取高度
    // nextTick(() => {
    //   if (searchList.value) {
    //     let allHeight = document.querySelector('.map-container').clientHeight
    //     tableHeight.value = allHeight * 0.65
    //   }
    // })
  }
})

const location = (scope) => {
  // let scope = {
  //   row: {
  //     taskdetail_id: 'd0428a9e-01d8-4759-af67-ee4cf13fb7a4',
  //     task_name: '抚顺县任务4',
  //     report_username: null,
  //     status: 0,
  //     xmc: '抚顺县',
  //     jcmj: 7.05,
  //     tbfw: '{"type":"MultiPolygon","coordinates":[[[[123.922222972,41.701507777],[123.922120327,41.701449606],[123.922075489,41.701429193],[123.921947558,41.701370952],[123.921889819,41.701334253],[123.921865969,41.701316212],[123.921828122,41.701287581],[123.921484729,41.701256881],[123.921423896,41.701203348],[123.921255082,41.701159685],[123.920843324,41.700928897],[123.920575973,41.700714957],[123.920535685,41.700716524],[123.920503387,41.700796383],[123.920468296,41.700864952],[123.92045358,41.700906368],[123.92045183,41.700911292],[123.920459349,41.700943999],[123.920473408,41.700952888],[123.92050395,41.700972197],[123.920633988,41.701006332],[123.920891365,41.701073894],[123.921000277,41.701127056],[123.921129599,41.701197526],[123.921199314,41.701275313],[123.921280676,41.70134874],[123.921372755,41.701407265],[123.921638457,41.701508868],[123.921617735,41.701539302],[123.92161416,41.701544553],[123.921668529,41.701573171],[123.921700849,41.701590184],[123.921789202,41.701633783],[123.92189121,41.701698712],[123.922004722,41.701767836],[123.922089384,41.701820041],[123.922132093,41.701872582],[123.922182255,41.701918555],[123.922193932,41.701929258],[123.922278636,41.70198432],[123.922351074,41.702026804],[123.922365186,41.70203508],[123.922442099,41.702078771],[123.922482226,41.702084165],[123.922514237,41.702055324],[123.922523076,41.702006657],[123.922526299,41.701965181],[123.922483753,41.701924073],[123.922439607,41.701904417],[123.922414304,41.701868888],[123.922398723,41.701846145],[123.922358309,41.701820742],[123.922291137,41.701791266],[123.922250783,41.70177015],[123.922237168,41.701751678],[123.922250232,41.701731564],[123.922282508,41.701721299],[123.922355669,41.701701949],[123.922366108,41.701699189],[123.922411629,41.701681672],[123.922434124,41.701654335],[123.922420367,41.70162586],[123.922306836,41.701555306],[123.922298185,41.701550404],[123.922222972,41.701507777]]]]}',
  //     jcbh: 'DL2104212024051105120036',
  //     idx: 1,
  //   },
  // }
  // let tbfw = scope.row.tbfw

  let tbfw = scope.row.feature
  if (tbfw) {
    let arr = JSON.parse(tbfw)
    let coordinatesArr = arr.geometry.coordinates.flat(2)
    const flyCoordinates = getCenterPoint(coordinatesArr)

    // Emit event to parent component
    emit('flyToTb', { flyCoordinates, row: scope.row })
  } else {
    ElMessage({
      message: '该房屋没有图斑范围',
      type: 'warning',
    })
  }
}
const openFn = (scope) => {
  emit('openDetailFn', { row: scope.row })
}

const handleSizeChange = (val) => {
  currentSize.value = val
  emit('getTbList')
}

const handleCurrentChange = (val) => {
  currentPage.value = val
  emit('getTbList')
}
const getHzxm = (hzxm) => {
  if (!hzxm) return '' // 先判断是否为空
  return hzxm.length > 3 ? hzxm.slice(0, 3) + '...' : hzxm
}
const getAddress = (address) => {
  if (!address) return '' // 先判断是否为空
  return address.length > 5 ? address.slice(0, 5) + '...' : address
}
const getVillage = (village) => {
  if (!village) return '' // 先判断是否为空
  return village.length > 8 ? village.slice(0, 8) + '...' : village
}
// 当前选中行
const currentRow = ref(null)

// 处理行点击
const handleRowClick = (row) => {
  currentRow.value = row
}

// 设置高亮行样式
const tableRowClassName = ({ row }) => {
  return row === currentRow.value ? 'selected-row' : ''
}
defineExpose({
  currentPage,
  currentSize,
  total,
})
</script>

<style lang="scss" scoped>
.search-list {
  position: absolute;
  top: 12rem;
  left: 5rem;
  z-index: 999;
  width: 750px;
  background-color: rgba(91, 93, 179, 0.8); /* 保留父容器背景，但不影响子元素 */
  /* 设置表格样式 */
  ::v-deep .el-table {
    width: 100%;
    overflow-x: auto; /* 启用水平滚动条 */
    background-color: transparent; /* 保证表格背景透明 */
    // color: #93dcfe;
    color: #fff;
    font-size: 2.2rem;
    font-family: 'Source Han Sans CN Normal', 'Source Han Sans CN Normal-Normal';
    font-weight: normal;
    --el-table-border-color: none;
    --el-table-border: none;
    .el-table-fixed-column--left {
      background-color: rgba(91, 93, 179, 1);
    }
    .el-table-fixed-column--right {
      background-color: rgba(91, 93, 179, 1);
    }
    .el-scrollbar__bar.is-horizontal {
      display: block;
      height: 10px;
      left: 2px;
    }
    .el-scrollbar__bar.is-vertical {
      display: block;
      width: 10px;
      top: 2px;
    }
    .el-scrollbar__thumb {
      background-color: #15f3e8;
    }
    .el-table__header-wrapper {
      // background-color:  rgba(91, 93, 179, 1);
      border-bottom: 1px solid #fff;
    }
    .el-table__cell {
      // border: 1px solid red;
      // padding: 0;
    }
  }
  /* 表格头、行和单元格样式 */
  ::v-deep .el-table th,
  ::v-deep .el-table tr,
  ::v-deep .el-table td {
    background-color: transparent; /* 保证表格头、行、单元格背景透明 */
    border: none;
    // color: #93dcfe;
    color: #fff;
    font-size: 2.2rem;
  }

  /* 设置表格行高度 */
  ::v-deep .el-table__body tr {
    padding: 0; /* 去除默认内边距 */
    height: 30px; /* 行高 */
    line-height: 30px; /* 行高通过 line-height 保证文本垂直居中 */
  }

  /* 设置单元格样式 */
  ::v-deep .el-table__body td {
    padding: 0; /* 去除单元格内边距 */
    line-height: 30px; /* 确保内容垂直居中 */
  }
  /* 高亮当前行颜色 */
  ::v-deep .el-table tbody tr:hover > td {
    background: #063570 !important;
  }

  /* 去掉表格中的内边距 */
  ::v-deep .el-table .cell,
  .el-table th div {
    padding: 0;
    font-size: 1.3rem;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* 表格的斑马条纹 */
  ::v-deep .el-table__row.warning-row {
    background: #01205a;
  }

  /* 分页器样式 */
  .pagination {
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: flex-end;

    // 共几页
    ::v-deep .el-pagination__total {
      color: #fff;
    }

    // 上一页、下一页按钮
    ::v-deep .btn-prev,
    ::v-deep .btn-next {
      color: #fff;
      background-color: rgba(91, 93, 179, 1);
    }

    // **分页按钮的默认样式**
    ::v-deep .el-pager li {
      background-color: rgba(91, 93, 179, 1);
      color: #fff;
      // border-radius: 4px;
      // cursor: pointer;
      // transition: all 0.3s;
    }

    // **鼠标悬浮时的效果**
    ::v-deep .el-pager li:hover {
      // background-color: #5b5db3; /* 悬浮颜色 */
      color: #409eff;
    }

    // **选中当前页的效果**
    ::v-deep .el-pager li.is-active {
      // background-color: #ff9800; /* 选中页高亮 */
      color: #409eff;
      font-weight: bold;
    }

    // 选择每页多少条的下拉框
    ::v-deep .el-pagination__sizes {
      .el-input__wrapper {
        background-color: rgba(91, 93, 179, 1);
        .el-input__inner {
          color: #fff;
        }
      }
    }

    // 前往哪一页
    ::v-deep .el-pagination__jump {
      color: #fff;
      .el-input__wrapper {
        background-color: rgba(91, 93, 179, 1);
        .el-select .el-input__inner {
          color: #fff;
        }
        .el-input__inner {
          color: #fff;
        }
      }
    }
  }
}
</style>
<!-- 选择每页多少条的下拉框列表样式 必须得这么加 -->
<style lang="scss">
.select_bottom {
  .el-select-dropdown {
    background-color: rgba(91, 93, 179, 1); /* 设置下拉框背景颜色 */
    color: #fff; /* 设置列表项字体颜色 */
  }
  .el-select-dropdown__item {
    color: #fff; /* 设置列表项字体颜色 */
  }

  .el-select-dropdown__item.hover,
  .el-select-dropdown__item:hover {
    background-color: #169cdc;
    color: #fff;
  }
}
/* 选中行高亮 */
.selected-row {
  background-color: #063570 !important; /* 绿色高亮 */
  // color: #409eff !important;
}
</style>
